<template>
  <div>
    <h2 class="h" style="color:#f49">我的成绩</h2>
    <div class="search">
      <!-- input -->
      <el-input class="search-input" v-model="input" placeholder="请输入" clearable />
      <!-- 多选框 -->
      <el-cascader class="search-checkall" v-model="value" :options="options" @change="handleChange" />
      <!-- 时间选择器 -->
      <el-date-picker class="search-data" v-model="date" type="daterange" range-separator="To"
        start-placeholder="Start date" end-placeholder="End date" :size="size" />

      <div class="search-search">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="info" plain @click="resetting">重置</el-button>

      </div>
    </div>

    <div class="main">
      <template v-if="data.length > 0">
      </template>

      <template v-else>
        <el-empty description="暂无成绩哦" />
      </template>

    </div>
    <div class="bottom">
      <div>当前时间：{{ new Date().toLocaleDateString() }}</div>
    </div>


  </div>
</template>

<script setup>
import { ref } from 'vue';

let input = ref("")//输入框
let value = ref([])//多选框
let date = ref("")//日期段

let data = ref([])//我的成绩数据


const handleChange = (value) => {//多选触发事件
  console.log(value)
}

const options = [//多选数据
  {
    value: 'Vue2',
    label: 'Vue2',
  },
  {
    value: 'Vue3',
    label: 'Vue3',
  },
  {
    value: 'React',
    label: 'VueReact3',
  },
  {
    value: '小程序',
    label: '小程序',
  },
  {
    value: 'JavaScript',
    label: 'JavaScript',
  },
  {
    value: '其他',
    label: '其他',
  },
]


let search = () => {//搜索事件
  console.log("搜索");
}

let resetting = () => {//重置事件
  input.value = ""
  value.value = []
  date.value = ""
}



</script>

<style lang="scss" scoped>
.h {
  font-size: 25px;
  font-weight: 600;
}

.search {
  width: 100%;
  height: 50px;
  // background-color: gray;
  // border: 1px solid gray;
  overflow: hidden;

  ::v-deep(.search-input) {
    width: 250px;
    margin-right: 10px;
    float: left;
  }

  ::v-deep(.search-checkall) {
    width: 250px;
    height: 35px;
    float: left;
  }

  ::v-deep(.el-date-editor) {
    float: left;
    margin-left: 40px;
  }

  .search-search {
    float: left;
    margin-left: 100px;
  }
}

.main {
  width: 100%;
  height: 300px;
  margin-top: 10px;
  // border: 1px solid gray;
}

.bottom {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  // border: 1px solid gray;
}
</style>